<template>
    <div>
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row :gutter="20">
                <el-col :span="5" :offset="0">
                    <el-form-item label="客户编号" prop="customrCode">
                        <el-input readonly v-model="form.customrCode"></el-input>
                    </el-form-item>
                    <el-form-item label="传真" prop="fax">
                        <el-input v-model="form.fax"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email"></el-input> </el-form-item></el-col>
                <el-col :span="5" :offset="0">
                    <el-form-item label="客户名称" prop="customName">
                        <el-input v-model="form.customName" placeholder="请输入客户名称"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="comment">
                        <el-input v-model="form.comment"></el-input> </el-form-item></el-col>
            </el-row>

            <el-table :data="tableText" style="width: 100%">
                <el-table-column label="联系人" prop="contacts">
                    <template slot-scope="scope">
                        <span v-if="scope.row.editable">
                            <el-input v-model="scope.row.contacts"></el-input>
                        </span>
                        <span v-else>{{ scope.row.contacts }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="地址" prop="address">

                    <template slot-scope="scope">
                        <span v-if="scope.row.editable">
                            <el-input v-model="scope.row.address"></el-input>
                        </span>
                        <span v-else>{{ scope.row.address }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="电话" prop="phone">

                    <template slot-scope="scope">
                        <span v-if="scope.row.editable">
                            <el-input v-model="scope.row.phone"></el-input>
                        </span>
                        <span v-else>{{ scope.row.phone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime">

                    <template slot-scope="scope">
                        <span v-if="scope.row.editable">
                            <el-input v-model="scope.row.createTime"> </el-input>
                        </span>
                        <span v-else>{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">

                    <template slot-scope="scope">
                        <el-tag type="primary" class="el-icon-edit" @click="handleEdit(scope.row)"></el-tag>
                    </template>
                </el-table-column>
            </el-table>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">编辑</el-button>
                <el-button @click="resetForm()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { GetCustomDtoAsync, FillCustomContactDtoAsync, UpdCustomDtoAsync } from "@/api/BasicsDatumServer/CustomerManagement";
export default {
    data() {
        return {
            form: {
                id: "",
                customrCode: "",
                customName: "",
                phone: "",
                comment: "",
                fax: "",
                email: "",
            },
            tableText: [], //联系人信息

            rules: {
                customrCode: [
                    { required: true, message: "请输入客户编号", trigger: "blur" },
                ],
                customName: [
                    { required: true, message: "请输入客户名称", trigger: "blur" },
                ],
                comment: [
                    { required: true, message: "请输入客户备注", trigger: "blur" },
                ],
                fax: [{ required: true, message: "请输入传真", trigger: "blur" }],
                email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
                phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
            },
        };
    },
    methods: {
        //反填客户信息
        getCustomList() {
            var that = {
                id: this.$route.query.id,
            };

            console.log(1111111, that.id);

            GetCustomDtoAsync(that).then(
                (res) => {
                    this.form = {
                        id: res.data.data.id,
                        customrCode: res.data.data.customrCode,
                        customName: res.data.data.customName,
                        phone: res.data.data.phone,
                        fax: res.data.data.fax,
                        email: res.data.data.email,
                        comment: res.data.data.comment,
                    };
                },
                (err) => {
                    console.error(err);
                }
            );
        },
        //反填客户联系人信息
        getCustomContactList() {
            var that = {
                customrCode: this.$route.query.customrCode,
            };

            console.log(22222222, that.customrCode);

            FillCustomContactDtoAsync(that).then(
                (res) => {
                    this.tableText = res.data.data;
                },
                (err) => {
                    console.error(err);
                }
            );
        },
        handleEdit(row) {
            row.editable = true;
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                var data = {
                    id: this.form.id,
                    customrCode: this.form.customrCode,
                    customName: this.form.customName,
                    phone: this.form.phone,
                    fax: this.form.fax,
                    email: this.form.email,
                    comment: this.form.comment,
                    CustomContactDtosList: this.tableText,
                };
                UpdCustomDtoAsync(data).then((res) => {
                    if (res.data.data > 0) {
                        this.$message({
                            message: "修改成功",
                            type: "success",
                        });
                    } else {
                        this.$message({
                            message: "修改失败",
                            type: "warning",
                        });
                    }
                });
            });
        },
        //返回
        resetForm() {
            this.$router.push("CustomerManagementList");
        },
    },
    created() {
        this.getCustomList();
        this.getCustomContactList();
    },
};
</script>

<style></style>